CSS Pane

Description

CSS for the List control can be defined on the List CSS Pane, keeping the CSS with the control if it is copied between components and preventing CSS class name collisions by wrapping the CSS definitions in a namespace unique to each List.

Discussion

CSS defined at the control level is stored with the List control, allowing you to copy the List control to another UX along with the CSS defined for the List.

A key benefit of defining CSS at the control level is that the CSS classes are wrapped in their own namespace. This prevents CSS class name collisions that can occur if multiple Lists in the UX component contain CSS definitions with identical class names. For example, if you define a class called .myclass1 in two Lists (e.g. 'LIST1' and 'LIST2'), the two classes will not overwrite each other. Contrast with CSS placed in the Local CSS property, which is copied with the List but will be overwritten if multiple List controls define the same class.

CSS defined at the UX component level is not specific to a List control. CSS defined at the UX component level can be referenced by multiple Lists in the component, however, component level CSS is not included with the List control if it is copied from one component to another.

Using SASS in your List CSS

CSS defined on this pane can use SASS syntax. SASS extends CSS with a number of useful features, such as variables and functions. For example:

$baseWidth: 40px;

.dragReorderAllow .dragReorderHandle {
    width: $baseWidth;
}
.dragRerderAllow .dragReorderHandle div {
    width: $baseWidth;
}

SASS support is integrated into Alpha Anywhere and does not require installing any third party tools. To learn more about SASS syntax and how to use it in CSS styles, see the SASS documentation.